<template>
  <div class="container">
    <div class="page-title">关注学者</div>
    <div class="info-wrap">
      <div
        v-loading="loading"
        v-for="(item, index) in list"
        :key="item.scholarId"
        class="box-wrap"
      >
        <div v-if="!item.isSelf">
          <el-divider v-if="index != 0"></el-divider>
          <el-avatar
            v-if="item.imgUrl"
            :size="60"
            :src="item.imgUrl"
          ></el-avatar>
          <el-avatar v-else :size="60">
            <i
              class="el-icon-user-solid"
              style="font-size: 30px; line-height: 55px"
            ></i>
          </el-avatar>
          <div class="detail-wrap">
            <div class="name" @click="viewProfile(item.scholar)">
              {{ item.scholarName }}
            </div>
            <!-- <div class="company">{{ item.company }}</div> -->
          </div>
          <div class="action" :style="{ top: index == 0 ? '35%' : '50%' }">
            <i
              v-if="item.requestPM"
              class="el-icon-message pm"
              @click="message(item.scholar)"
            >
              <span>私信</span>
            </i>
            <i v-else class="el-icon-message disablePm">
              <span>私信</span>
            </i>
            <i
              class="el-icon-close unfollow"
              @click="unfollow(item.scholar, item.scholarName)"
              ><span>取关</span></i
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  name: "UserInfo",
  data() {
    return {
      isLogin: false,
      loading: true,
      list: [],
    };
  },
  created() {
    // this.$router.push("/usercenter/messagecenter/privatemessage");
    this.getList();
  },
  methods: {
    viewProfile(id) {
      console.log(id);
      // 跳转学者页面
      this.$router.push("/scholarprofile/" + id);
    },
    message(id, uid) {
      console.log(id);
      // 跳转私信
      this.$router.push({
        name: "privatemessage",
        params: { chatboxid: id, targetid: uid },
      });
      // this.$router.push("/usercenter/messagecenter/privatemessage");
    },
    async unfollow(id, name) {
      console.log(id);
      // 取消关注
      await this.$axios({
        method: "post",
        url: "/api/follow/",
        data: this.$qs.stringify({
          scholarId: id,
          scholarName: name,
        }),
      }).then((res) => {
        console.log(res);
      });
    },
    async getList() {
      await this.$axios({
        method: "get",
        url: "/api/getFollowList",
      })
        .then((res) => {
          console.log(res.data);
          this.list = res.data.data;
          var i;
          for(i=0;i<this.list.length;i++)
          {
            this.list[i].imgUrl='http://120.46.205.87'+this.list[i].imgUrl;
          }
        })
        .catch((err) => {
          console.log(err);
        });
      if (this.list.length == 0) return;
      for (let i = 0; i < this.list.length; i++) {
        await this.$axios({
          method: "post",
          url: "/api/requestPM",
        })
          .then((res) => {
            console.log(res.data);
            if (res.data.errno === 3001) {
              this.list[i].requestPM = false;
            } else this.list[i].requestPM = true;
            console.log(this.list);
          })
          .catch((err) => {
            console.log(err);
          });
      }
      this.loading = false;
    },
  },
};
</script>
<style scoped>
.unfollow {
  color: red;
  cursor: pointer;
}
.unfollow:hover {
  background-color: rgb(255, 236, 236);
}
.disablePm {
  color: #bbbbbb;
}
.pm:hover {
  background-color: #eeeeee;
}
.pm {
  display: inline-block;
  cursor: pointer;
}
.action span {
  font-size: 16px;
}
.action i {
  height: 100%;
  padding: 38px 25px;
  box-sizing: border-box;
  vertical-align: middle;
}
.action {
  float: right;
  position: relative;
  height: 96px;
  /* outline: 1px red solid; */
}
.company {
  font-size: 14px;
  color: #777777;
}
.name {
  font-size: 18px;
  font-weight: 600;
  line-height: 43px;
  cursor: pointer;
}
.detail-wrap {
  padding: 25px 0;
  vertical-align: middle;
  display: inline-block;
}
.el-divider {
  margin: 1px auto;
  position: relative;
  top: 1px;
  /* outline: 1px red solid; */
}
.el-avatar {
  margin: 0 15px 0 0;
  vertical-align: middle;
}
.box-wrap {
  /* padding: 10px; */
  letter-spacing: 1px;
  /* outline: 1px red solid; */
}
.info-wrap {
  padding: 40px;
  box-shadow: #dedede 0px 0px 20px;
}
.page-title {
  margin: 0 0 40px 0;
  font-size: 22px;
  font-weight: 600;
  color: #3d3daf;
}
.container {
  letter-spacing: 1px;
  width: 1000px;
}
</style>